<script setup lang="ts">
import {Close, CopyDocument, Minus,Monitor} from "@element-plus/icons-vue"
import {ElNotification} from "element-plus"
import { windowsControl } from "@/utils/windowsController"

const props = defineProps({
  themeDarkStyle: {
    required: false,
    default: false,
    type: Boolean
  }
})

const handleWindowClose = ( )=>{
  window.close()
}

const handleWindowMinimize = ()=>{
  windowsControl().minimizeWindow()
}

const handleWindowMaximize = ()=>{
  windowsControl().maximizeWindow()
}

const handleWindowFullScreen = ()=>{
  windowsControl().fullScreenWindow()
}


</script>

<template>
<div :class="themeDarkStyle ? 'header-windows-btn dark' : 'header-windows-btn'">
  <el-icon @click="handleWindowFullScreen"><Monitor></Monitor></el-icon>
  <el-icon @click="handleWindowMinimize"><Minus /></el-icon>
  <el-icon @click="handleWindowMaximize"><CopyDocument /></el-icon>
  <el-icon @click="handleWindowClose"><Close /></el-icon>
</div>
</template>

<style lang="scss" scoped>
.header-windows-btn{
  height: 20px;
  //border-left: 1px solid #000;
  vertical-align: middle;
  .el-icon{
    margin-left: 15px;
    height: 20px;
    width: 20px;
    //color: white;
    &:hover{
      color: #1ecf9d;
    }
  }

}

.dark{
  .el-icon{
    color: white;
    &:hover{
      color: #1ecf9d;
    }
  }
}

</style>